import React from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import { LinkButton } from './components/link';
import { LoginPage } from './pages/login';
import { RegisterPage } from './pages/register';
import { BannerButton } from './components/bannerButton';
import { useGetCategoriesQuery } from './generated/graphql';
import { CategoryPage } from './pages/category';
import { ProblemPage } from './pages/problem';
import { AboutPage } from './pages/about';
import { HomePage } from './pages/home';
import { useUserName } from './utils/useUserName';

function App() {
  const history = useHistory();
  const categoriesQuery = useGetCategoriesQuery();
  const category = categoriesQuery.data?.categories ?? [];
  const userName = useUserName();
  return (
    <div>
      <div className="w-full">
        <div className="sticky top-0 h-16 bg-white w-full flex items-center border-b gap-4">
          <div
            className="ml-8 text-xl select-none cursor-pointer"
            onClick={() => {
              history.push('/');
            }}
          >
            <span className="font-bold text-blue-800" style={{ marginRight: 1 }}>
              Byte
            </span>
            Code
          </div>
          <div className="flex-grow flex gap-4">
            <BannerButton
              onClick={() => {
                history.push('/');
              }}
            >
              主页
            </BannerButton>
            {category.map((v) => (
              <BannerButton
                onClick={() => {
                  history.push('/categories/' + v._id);
                }}
              >
                {v.name}
              </BannerButton>
            ))}
            <BannerButton
              onClick={() => {
                history.push('/about');
              }}
            >
              关于
            </BannerButton>
          </div>
          <div className="flex w-48 gap-4 mr-8">
            {userName && (
              <>
                你好，{userName}。
                <LinkButton
                  onClick={() => {
                    localStorage.removeItem('jwt');
                    localStorage.removeItem('userName');
                    window.location.reload();
                  }}
                >
                  退出
                </LinkButton>
              </>
            )}
            {!userName && (
              <>
                <button
                  className="appearance-none outline-none flex items-center justify-center px-4 py-1 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 cursor-pointer"
                  onClick={() => {
                    history.push('/login');
                  }}
                >
                  登录
                </button>
                <LinkButton
                  onClick={() => {
                    history.push('/register');
                  }}
                >
                  注册
                </LinkButton>
              </>
            )}
          </div>
        </div>
        <div>
          <Switch>
            <Route path="/login">
              <LoginPage />
            </Route>
            <Route path="/register">
              <RegisterPage />
            </Route>
            <Route path="/about">
              <AboutPage />
            </Route>
            <Route path="/categories/:categoryId">
              <CategoryPage />
            </Route>
            <Route path="/problems/:problemId">
              <ProblemPage />
            </Route>
            <Route path="/">
              <HomePage />
            </Route>
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default App;
